<template>
  <div>
    <el-row type="flex">
      <el-col :span="4">
        <el-tree
          :style="{ height: heightTree }"
          :data="data"
          :props="defaultProps"
          @node-click="handleNodeClick"
        ></el-tree>
      </el-col>

      <el-col class="formWarp" :span="20" style="margin-left:10px;" :style="{ height: heightTree }">
        <h2 style="text-align:center;font-size:25px;">大组工网管理人员备案表</h2>
        <div :style="{ height: heightTable }" style="overflow-y:scroll">
           <table border="1" class="myTable">
              <tr>
                 <td colspan="6" style="text-align: left; font-size: 18px">
                  一、大组工网网络安全管理人员配备情况
                 </td>
              </tr>
              <tr>
                <td>人员类型</td>
                <td>姓名</td>
                <td>职务</td>
                <td>部门</td>
                <td>办公电话</td>
                <td>手机号码</td>
              </tr>
              <tr>
                <td>系统管理员</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
              </tr>
              <tr>
                <td>安全保密管理员</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
              </tr>
              <tr>
                <td>安全审计员</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
              </tr>
              <tr>
                 <td colspan="6" style="text-align: left; font-size: 18px">
                  二、大组工网网站管理人员配备情况
                 </td>
              </tr>
              <tr>
                <td>人员类型</td>
                <td>姓名</td>
                <td>职务</td>
                <td>部门</td>
                <td>办公电话</td>
                <td>手机号码</td>
              </tr>
              <tr>
                <td>系统管理员</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
              </tr>
              <tr>
                <td>安全保密管理员</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
              </tr>
              <tr>
                <td>安全审计员</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
              </tr>
              <tr>
                 <td colspan="6" style="text-align: left; font-size: 18px">
                  三、省委组织部大组工网电子邮件系统管理人员配备情况
                 </td>
              </tr>
              <tr>
                <td>人员类型</td>
                <td>姓名</td>
                <td>职务</td>
                <td>部门</td>
                <td>办公电话</td>
                <td>手机号码</td>
              </tr>
              <tr>
                <td>系统管理员</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
              </tr>
           </table>
        </div>
        <div style="background: #fff;float:right;height: 40px;">
            <el-button>取 消</el-button>
            <el-button type="primary">保 存</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryForm: {
        classType: [],
        personType: [],
        personName: "",
        post: "",
        department: "",
        telphone: "",
        phone: "",
        startDate: "",
        endDate: "",
      },
      heightTree: window.innerHeight - 150 + "px",
      heightTable:window.innerHeight - 240 + "px",
      data: [
        {
          label: "山东省",
          children: [
            {
              label: "青岛市",
            },
            {
              label: "济南市",
            },
            {
              label: "烟台市",
            },
            {
              label: "潍坊市",
            },
            {
              label: "临沂市",
            },
            {
              label: "济宁市",
            },
            {
              label: "淄博市",
            },
            {
              label: "菏泽市",
            },
            {
              label: "德州市",
            },
            {
              label: "东营市",
            },
            {
              label: "威海市",
            },
            {
              label: "泰安市",
            },
            {
              label: "滨州市",
            },
            {
              label: "聊城市",
            },
            {
              label: "日照市",
            },
            {
              label: "枣庄市",
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  methods: {
    handleNodeClick(data) {
      showLoading()
      const params = {
        user:"zhangsan"
      }
      getList(params).then((res)=>{
        if(res.res){
          hideLoading()
          this.data = res.resdata
        }else{
          this.$error('失败')
          hideLoading();
        }
      })
    },
    handleCheckClassType(value) {
       console.log(value,"value");
    },
    resertPsw() {
  showLoading();
  if (this.multipleSelection.length === 1) {
    let personJsons = {
      'userId': store.getters.user_id.toString(),
      'token': store.getters.token.toString(),
      'system': 'officedo',
      'data': {
        'userNo': this.multipleSelection[0].userNo,
        'userId': this.multipleSelection[0].userId
      }
    };
    let that = this;
    that.$confirm('确定重置密码吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      await resertPsw(personJsons).then(response => {
        if (response.result) {
          that.$message.success(response.message);
          that.init(that.selectedNode);
        } else {
          that.$message.error(response.message);
        }
      }).catch(() => {
        // 请求失败的处理
      }).finally(() => {
        hideLoading(); // 在 finally 语句块中执行 hideLoading 方法
        that.onClosed();
      });
    });
  } else {
    this.$message.warning('请选择一个需要删除的用户');
  }
}

  },
};
</script>

<style>
.el-col {
  border-radius: 4px;
  background: #fff;
}
.formWarp{
  box-shadow: 5px 5px 10px #eee;
  padding: 5px;
}
.myTable {
  width: 100%;
  margin-bottom: 10px;
  border-spacing: 0;
  border: 1px solid #dcdfe6;
}

.myTable tbody {
  width: 100%;
}

.myTable td {
  word-wrap: break-word;
  font-size: 14px;
  padding: 15px 10px;
  text-align: center;
}
</style>




<!-- <el-form ref="form" :model="queryForm" label-width="120px">
  <el-form-item label="组工网统计分类:">
    <el-checkbox-group v-model="queryForm.classType" @change="handleCheckClassType">
      <el-checkbox
        label="大组工网网络安全管理人员配备情况"
      ></el-checkbox>
      <el-checkbox label="大组工网网站管理人员配备情况"></el-checkbox>
      <el-checkbox
        label="省委组织部大组工网电子邮件系统管理人员配备情况"
      ></el-checkbox>
    </el-checkbox-group>
  </el-form-item>
  <el-form-item label="人员类型:">
    <el-checkbox-group v-model="queryForm.personType">
      <el-checkbox label="系统管理员"></el-checkbox>
      <el-checkbox label="安全保密管理员"></el-checkbox>
      <el-checkbox label="安全审计员"></el-checkbox>
    </el-checkbox-group>
  </el-form-item>
  <el-form-item label="姓名:">
    <el-input v-model="queryForm.personName"></el-input>
  </el-form-item>
  <el-form-item label="职务:">
    <el-input v-model="queryForm.post"></el-input>
  </el-form-item>
  <el-form-item label="部门:">
    <el-input v-model="queryForm.department"></el-input>
  </el-form-item>
  <el-form-item label="办公电话:">
    <el-input v-model="queryForm.telphone"></el-input>
  </el-form-item>
  <el-form-item label="手机号码:">
    <el-input v-model="queryForm.phone"></el-input>
  </el-form-item>
  <el-form-item label="开始时间:">
    <el-date-picker
      v-model="queryForm.startDate"
      type="date"
      value-format="yyyy-MM-dd"
      placeholder="选择日期"
    >
    </el-date-picker>
  </el-form-item>
  <el-form-item label="结束时间:">
    <el-date-picker
      v-model="queryForm.endDate"
      type="date"
      value-format="yyyy-MM-dd"
      placeholder="选择日期"
    >
    </el-date-picker>
  </el-form-item>
</el-form> -->


<!-- else if(result.resultdata === []){
  this.fillingOrg = ""; 
  this.fillingPerson = ""; 
  this.fillingTel = "";
  this.netSafeAdminName = ""; 
  this.netSafeAdminPost = ""; 
  this.netSafeAdminDepartment = "";
  this.netSafeAdminTel = ""; 
  this.netSafeAdminPhone = ""; 
  this.netSafeSecrecyName = ""; 
  this.netSafeSecrecyPost = ""; 
  this.netSafeSecrecyDepartment = "";
  this.netSafeSecrecyTel = ""; 
  this.netSafeSecrecyPhone = ""; 
  this.netSafeAuditName = ""; 
  this.netSafeAuditPost = ""; 
  this.netSafeAuditDepartment = "";
  this.netSafeAuditTel = ""; 
  this.netSafeAuditPhone = ""; 
  this.netManagerAdminName = ""; 
  this.netManagerAdminPost = ""; 
  this.netManagerAdminDepartment = "";
  this.netManagerAdminTel = ""; 
  this.netManagerAdminPhone = ""; 
  this.netManagerSecrecyName = ""; 
  this.netManagerSecrecyPost = ""; 
  this.netManagerSecrecyDepartment = "";
  this.netManagerSecrecyTel = ""; 
  this.netManagerSecrecyPhone = "";
  this.netManagerAuditName = ""; 
  this.netManagerAuditPost = ""; 
  this.netManagerAuditDepartment = "";
  this.netManagerAuditTel = ""; 
  this.netManagerAuditPhone = "";
  this.netEamilAdminName = "";
  this.netEamilAdminPost = ""; 
  this.netEamilAdminDepartment = "";
  this.netEamilAdminTel = ""; 
  this.netEamilAdminPhone = "";
} -->